<template>
  <div>
    <h2 class="about">我是关于</h2>
  </div>
</template>

<script setup lang="ts" name="About">
  import { onMounted, onUnmounted } from "vue";

  //通过点击导航，视觉效果上消失了的路由组件，默认是被卸载掉的，需要的时候再去挂载
  onMounted(() => {
    console.log("About组件挂载了");
  });
  onUnmounted(() => {
    console.log("About组件卸载了");
  });
</script>

<style scoped>
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgb(85, 84, 84);
    font-size: 18px;
  }
</style>
